<template>
  <div
    class="moomoo_mod_nav"
    :style="{backgroundColor: bgBase}"
  >
    <div class="v-nav-wrap">
      <!-- 返回上一级 -->
      <div class="v-nav-to">
        <a
          :style="{color: icon_color}"
          v-if="!no_back"
          @click="to ? $router.push(to) : $router.go(-1)"
        >
          <van-icon
            :name="icon_name"
            :class="{'icon':icon_name === 'down'}"
          />
        </a>
      </div>
      <div
        class="v-nav-title"
        v-if="is_title"
        :style="{'color': title_color}"
      >{{title}}</div>
      <!-- 插槽判断右侧跳转是否展示 -->
      <div class="v-nav-right">
        <slot></slot>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Vnav',
  props: {
    title: String,
    bgBase: {
      type: String,
      default: '#FFF'
    },
    icon_color: String,
    to: String,
    is_title: {
      type: Boolean,
      default: true
    },
    no_back: Boolean,
    icon_name: {
      type: String,
      default: 'arrow-left'
    },
    title_color: String
  }
}
</script>
<style lang="less">
@import "../../assets/less/index.less";
.moomoo_mod_nav {
  position: sticky;
  top: 0;
  z-index: 9;
  .v-nav-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    z-index: 9;
    font-size: @font-size-md;
    text-align: center;

    /** 左侧返回上一层按钮 */
    .v-nav-to {
      position: absolute;
      left: 0;
      padding: 12px;
      & > a {
        display: block;
        width: 100%;
        i {
          font-size: 20px;
        }
        .icon {
          transform: rotate(90deg);
        }
        span {
          font-size: @font-size-sm;
          color: @white;
        }
      }
    }
    /** prop标题 */
    .v-nav-title {
      margin: 0 16px;
      padding: 0 50px;
      flex: 1;
      // span {
      font-weight: bold;
      font-family: Roboto-Medium;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      // }
    }

    /** 右侧跳转按钮 */
    .v-nav-right {
      position: absolute;
      right: 0;
      margin-right: 16px;
      font-size: 14px;
      &.icon_mod {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
        }
        span {
          font-size: @font-size-xs;
        }
      }
      span,
      a {
        font-size: @font-size-sm;
        color: #1a1a1a;
        font-family: Roboto-Regular, Roboto;
      }
      b {
        border: solid 1px @white;
        border-radius: 4px;
        padding: 0 5px;
        font-size: @font-size-sm;
        color: @white;
      }
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>